<template>
    <div class="page_catalogue_container">
        <div class="catalogue_title" v-fade-in>Table of contents</div>
        <div class="catalogue_list">
            <div v-for="(item, index) in catalogueList" :key="index" class="catalogue_item">
                <div class="catalogue_item_line"></div>
                <div class="catalogue_item_title" @click="goAnchorLocation(item)" v-fade-in>{{ item.title }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    catalogueList: {
        type: Array,
        default: () => []
    }
})

const goAnchorLocation = (item) => {
    const element = document.getElementById(item.title);
    const navContainer = document.querySelector('.nav_container');
    const navContainerHeight = navContainer ? navContainer.offsetHeight : 0;

    if (element) {
        const offsetTop = element.offsetTop - navContainerHeight;
        window.scrollTo({
            top: offsetTop,
            behavior: "smooth"
        });
    }
}
</script>

<style lang='less'>
@import "./style.less";
</style>